import { useCourseSessionStore } from '@/stores/useCourseStore'
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'chapter',
  emits: ['step'],
  setup(props, { emit }) {
    const router = useRouter()

    const { t } = useI18n()
    const course = useCourseSessionStore()

    return () => (
      <div class="w-full h-full px-5 bg-white">
        <div class="flex items-center justify-between w-full h-35">
          <div class="flex-shrink-0 w-40 rounded-md h-25">
            <img
              src={course.course?.cover}
              alt={course.course?.title}
              class="w-full h-full border rounded-md shadow-md"
            />
          </div>

          <div class="flex flex-col items-start justify-between flex-1 h-20 ml-6">
            <p class="block overflow-visible font-bold">{course.document?.title}</p>
            <span
              class="block overflow-hidden overflow-visible text-sm text-gray-400 cursor-pointer whitespace-nowrap"
              onClick={() => {
                router.push({
                  path: '/detail'
                })
              }}
            >
              {t('chapter.detail')} &gt;
            </span>
          </div>
        </div>

        <a-divider></a-divider>

        <div class="w-full h-[calc(100%-188px)] overflow-auto overflow-y-scroll">
          <a-list
            item-layout="horizontal"
            data-source={course.document?.contents}
            v-slots={{
              renderItem: ({ item, index }: any) => {
                return (
                  <a-list-item
                    class="cursor-pointer hover:bg-blue-100 p-4"
                    onClick={() => {
                      course.contentIndex = index
                      emit('step', index)
                    }}
                  >
                    <a-list-item-meta
                      description={item.text.slice(0, 80)}
                      v-slots={{
                        title: () => <a>{item.title}</a>,
                        avatar: () => <a-avatar>{index + 1}</a-avatar>
                      }}
                    ></a-list-item-meta>
                  </a-list-item>
                )
              }
            }}
          ></a-list>
        </div>
      </div>
    )
  }
})
